<template>
	<view class="agent-choose-store" :style="{background:pageColor}" v-if="isLoad">
		<fixed>
			<search @input="toSearch" type="input" :padding="30" :radius="0" placeholder="请输入门店名称">
			</search>
		</fixed>
		<view @tap.stop="toCheckItem(index)" v-for="(item,index) in list.data" :key="index">
			<longbingbing-shopstore-list-item :from="options.ocid?'order':'choose-store'"
				:distance="options.ocid?true:false" :info="item"></longbingbing-shopstore-list-item>
		</view>

		<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading">
		</load-more>

		<abnor :tip="[{text: '暂无门店数据'}]" v-if="!loading&&list.data.length<=0&&list.current_page==1"
			percent="calc(100vh - 114px - calc(30rpx + env(safe-area-inset-bottom) / 2))"></abnor>

		<view class="space-footer"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	import longbingbingShopstoreListItem from "@/components/longbingbing-shopstore-list-item.vue"
	export default {
		components: {
			longbingbingShopstoreListItem
		},
		data() {
			return {
				isLoad: false,
				options: {},
				param: {
					page: 1,
					title: ''
				},
				list: {
					data: []
				},
				loading: true,
			}
		},
		computed: mapState({}),
		async onLoad(options) {
			let {
				id = 0,
					agent = 0,
					ocid = 0,
			} = options
			options.id = id * 1
			options.agent = agent * 1
			options.ocid = ocid * 1
			this.options = options
			if (ocid * 1 > 0) {
				await this.$util.getUtilLocation(false)
			}
			await this.initIndex()
			this.isLoad = true
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.list.current_page >= this.list.last_page || this.loading) return;
			this.param.page = this.param.page + 1;
			this.loading = true;
			this.getList();
		},
		methods: {
			...mapMutations([]),
			async initIndex(refresh = false) {
				await this.getList()
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				// #ifdef H5
				if (!refresh) {
					this.$jweixin.hideOptionMenu()
				}
				// #endif
			},
			initRefresh() {
				this.param.page = 1
				this.initIndex(true)
			},
			toSearch(val) {
				this.param.title = val
				this.getList(1)
			},
			async getList(page) {
				if (page) {
					this.param.page = 1
				}
				let {
					list: oldList,
					param
				} = this
				let {
					id = 0,
						agent,
						ocid: coach_id = 0
				} = this.options
				if (coach_id) {
					let {
						lat,
						lng
					} = this.location
					param = Object.assign({}, param, {
						coach_id,
						lat,
						lng,
					})
				}
				let methodKey = coach_id ? 'mine' : agent ? 'agent' : 'admin'
				let methodModel = coach_id ? 'storeListByCoach' : 'storeList'
				let newList = await this.$api[methodKey][methodModel](param)
				newList.data.map(item => {
					item.is_check = item.id == id
				})
				if (this.param.page == 1) {
					this.list = newList
				} else {
					newList.data = oldList.data.concat(newList.data)
					this.list = newList
				}
				this.loading = false
				this.$util.hideAll()
			},
			async toCheckItem(index) {
				let item = this.$util.deepCopy(this.list.data[index])
				let {
					id: store_id,
					is_check
				} = item
				this.list.data.map(item => {
					item.is_check = item.id == store_id
				})
				let {
					ocid = 0,
						agent
				} = this.options
				try {
					if (ocid) {
						this.$util.getPage(-1).orderInfo.store_id = store_id
						this.$util.getPage(-1).orderInfo.store_info = item
					} else {
						let methodKey = this.options.agent ? 'agent' : 'admin'
						await this.$api[methodKey].selectStore({
							store_id
						})
						this.$util.showToast({
							title: `切换成功`
						})
					}
					this.$util.back()
					this.$util.goUrl({
						url: 1,
						openType: `navigateBack`
					})
				} catch (e) {
					// #ifdef H5
					history.back()
					// #endif
				}
			}
		}
	}
</script>


<style lang="scss">
	.agent-choose-store {
		.list-item {
			.cover {
				width: 160rpx;
				height: 143rpx;
			}
		}
	}
</style>